<template>
  <div>
    <div id="container"></div>
    <el-dialog
      title="重复片段"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div>
        <div v-for="(item,index) in reviewContent" :key="index">
          <span style="color: blue;">源文档[{{ item.start1 }},{{ item.end1 }}]-对比文档[{{ item.start2 }},{{ item.end2 }}]</span> : {{ item.content }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSimilarityCount } from "@/api/biz/similarityResult";
import * as echarts from "echarts";
export default {
  name: "SimilarityResult",
  data() {
    return {
      dialogVisible: false,
      workSubmitId: "",
      dataList: [],
      xList: [],
      yList: [],
      reviewContent:[], // 重复片段数组
    };
  },
  async mounted() {
    this.workSubmitId = this.$route.query.workSubmitId; // 获取路由参数
    await this.getCountList();
    var chartDom = document.getElementById("container");
    var myChart = echarts.init(chartDom);
    var option;
    console.log("mounted");

    console.log(this.dataList, this.xList, this.yList);

    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      xAxis: {
        name: "姓名",
        type: "category",
        data: this.xList,
      },
      yAxis: {
        name: "查重率(单位/%)",
        type: "value",
      },
      series: [
        {
          name: "查重率",
          data: this.yList,
          type: "bar",
        },
      ],
    };
    myChart.on("click", (param) => {
      this.dialogVisible = true;
      this.reviewContent = JSON.parse(this.dataList[param.dataIndex].detailResult);
      console.log("reviewContent" ,this.reviewContent);
      
    });

    option && myChart.setOption(option);
  },
  methods: {
    getCountList() {
      return new Promise((resolve) => {
        getSimilarityCount(this.workSubmitId).then((res) => {
          this.dataList = res.data;
          this.xList = this.dataList.map((item) => item.compareSubmitName);
          this.yList = this.dataList.map((item) => item.similarityScore * 100);
          console.log("getList");

          console.log(this.dataList, this.xList, this.yList);
          resolve();
        });
      });
    },
  },
};
</script>

<style>
#container {
  height: 800px;
}
.msgBox {
  width: 60%;
  height: 60%;
  overflow: auto;
}
</style>
